import React from 'react';
import {Button, Card, Checkbox, Col, Divider, Input, List, message, Pagination, Row, Spin} from 'antd';
import {omit, find, isFunction, keys, map, isEmpty, findIndex, differenceBy} from "lodash-es";
import BaseComp from "../Base/BaseComp";
import TableComp from "../TableComp";
import TreeComp from "../TreeComp/TreeComp";
import {DoubleRightOutlined} from "@ant-design/icons";
import PropTypes from "prop-types";
import styles from "./index.module.less";

const {Search} = Input;

/**
 * 树+表格
 */
export default class TreeTable extends BaseComp {

    static propTypes = {
        ...BaseComp.propTypes,
        multi: PropTypes.bool,
        leftProps: PropTypes.object,
        rightProps: PropTypes.object,
        leftList: PropTypes.arrayOf(PropTypes.object),
        rightList: PropTypes.arrayOf(PropTypes.object),
        /**
         * 请求“左侧列表”数据
         * @type {function(leftSelNode: {}):Promise}
         * @param leftSelNode {{}} 左侧选中的节点
         * Promise 返回的第一个参数，即列表数据
         */
        // fetchLeftList: PropTypes.func,
        // /**
        //  * 请求“右侧列表”数据
        //  * @type {function(leftSelNode: {}, searchData: {
        //  * fuzzyMath?: string, search?: string, filterData?: {}, current?: number, pageSize?: number
        //  * }):Promise}
        //  * Promise 返回的第一个参数，即列表数据
        //  */
        // fetchRightList: PropTypes.func,
        /**
         * 是否需要左侧列表
         */
        needLeft: PropTypes.bool
    };

    /**
     *
     * @type { TreeComp | null}
     */
    treeRef = null;

    /**
     *
     * @type { TableComp | null}
     */
    tableRef = null;

    selectedNode = null;

    initState(props) {
        let superState = super.initState(props);
        return {
            ...superState,
            // leftLoading: false,
            // rightLoading: false,
            // leftList: [],
            // rightList: []
        }
    }

    // componentDidMount() {
    //     super.componentDidMount && super.componentDidMount();
    //     const {needLeft, fetchLeftList, fetchRightList} = this.props;
    //
    //     if (needLeft && isFunction(fetchLeftList)) {
    //         this.setState({leftLoading: true});
    //         let rspLeft = fetchLeftList();
    //         if (rspLeft instanceof Promise) {
    //             rspLeft.then(dataList => {
    //                 this.setState({leftList: dataList, leftLoading: false}, () => {
    //
    //                 });
    //             });
    //         }
    //     }
    // }

    /**
     * 选择节点之后的回调
     * @param keys {string[]} 选中的节点
     * @param event {{selected: boolean, selectedNodes, node, event}}
     */
    hdlSelectNode(keys, event) {
        const {node} = event;
        // debugger;
        // 如果点击的是同一个节点，则什么都不做
        if (this.selectedNode && this.selectedNode.key === node.key) return false;

        // 将左边数据 更新到右侧列表
        this.selectedNode = this.treeRef.getNodeByKey(node.key);

        this.runPropsFunc('afterSelectNode')(keys, event);
    }

    /**
     * 点击展开/收缩的回调
     * @param expandedKeys {string[]}
     * @param moreData {{expanded: boolean, node, nativeEvent: MouseEvent}}
     */
    hdlExpandNode(expandedKeys, moreData) {
        this.runPropsFunc('afterExpandNode')(expandedKeys, moreData);
    }

    getSelNode() {
        let selNode = !isEmpty(this.selectedNode) ? this.treeRef.getNodeByKey(this.selectedNode.key) : null;
        if (isEmpty(selNode)) {
            this.selectedNode = null;
        }
        return selNode;
    }

    hdlTableSearch() {

    }

    hdlChangePage(page, pageSize) {

    }

    mainRender(context) {
        const {leftList, rightList, style, multi, leftProps={}, rightProps={}, ...restProps} = this.props;

        return (
            <Row style={{flexFlow: 'nowrap', ...(style || {})}}>
                <Col flex={'250px'} style={{padding: '0 8px'}}>
                    <TreeComp
                        style={{height: '100%'}}
                        border={true}
                        {...leftProps}
                        onRef={(ref) => {
                            this.treeRef = ref;
                        }}
                        afterSelect={this.hdlSelectNode.bind(this)}
                        afterExpand={this.hdlExpandNode.bind(this)}
                        compData={leftList}
                    />
                </Col>
                <Col flex={'auto'}>
                    <Row justify="space-around" align="middle" style={{flexFlow: 'nowrap', height: 40}}>
                        <Col flex={'250px'}>
                            <Search
                                style={{width: '100%'}}
                                placeholder={this.myFormatMessage('comp.search.placeholder')}
                                onSearch={this.hdlTableSearch.bind(this)}
                                onKeyDown={(e) => {
                                    e.stopPropagation();
                                }}
                            />
                        </Col>
                        <Col flex={'auto'} style={{textAlign: 'right'}}>
                            <Pagination size={"small"} simple onChange={this.hdlChangePage.bind(this)}/>
                        </Col>
                        <Col>
                            <Button size={'small'} type={"link"}>
                                <DoubleRightOutlined/>
                            </Button>
                        </Col>
                    </Row>
                    <TableComp
                        style={{height: 'calc(100% - 40px)'}}
                        rowSelect={true}
                        needNO={true}
                        {...rightProps}
                        onRef={(ref) => {
                            this.tableRef = ref;
                        }}
                        dataSource={rightList}
                    />
                </Col>
            </Row>
        )
    };

}